<template>
    <div id="div1">
        <div class="div3">
            <!-- 走马灯显示图片预览-->
            <div id="div5">
                <el-carousel :interval="5000" arrow="always" height="460px">
                    <el-carousel-item v-for="(item,index) in picture_1[0]" :key=index>
                        <img :src="item.notableAddress">
                    </el-carousel-item>
                </el-carousel>
            </div>
            <!-- 左侧导航条-->
            <div id="div2">
                <ul style="padding-left: 0;padding-top: 50px;" class="ul_2">
                    <li v-for="(item,index) in daoHangTiao[0]" id="li1" @mouseenter="change(index)">
                        <a href="javascript:void(0)" @mouseenter="enter()" @mouseleave="leave()">
                            {{ item.notableTitle }}
                            <em class="el-icon-arrow-right"
                                style="float: right;line-height: 42px; margin-right: 40px"></em>
                        </a>
                    </li>
                </ul>
                <!--导航条显示浮动窗口-->
                <div id="div4" v-show="caiDan" @mouseenter="enter_1()" @mouseleave="leave_1()">
                    <ul v-for="(item,index) in picture_4[index_1][0]" :key="index" class="ul_1"
                        style="border: 1px solid white">
                        <li>
                            <router-link :to="`/ShoppingCart?id=${item.prod_id}`">
                            <img :src="item.prod_pic" alt="">
                            <a href=""><span>{{ item.prod_title }}</span></a>
                            </router-link>
                        </li>
                    </ul>
                    <ul v-for="(item,index) in picture_4[index_1][1]" class="ul_1"
                        style="border: 1px solid white;display: inline-block">
                        <li>
                            <router-link :to="`/ShoppingCart?id=${item.prod_id}`">
                            <img :src="item.prod_pic" alt="">
                            <a href=""><span>{{ item.prod_title }}</span></a>
                            </router-link>
                        </li>
                    </ul>
                    <ul v-for="(item,index) in picture_4[index_1][2]" class="ul_1"
                        style="border: 1px solid white;display: inline-block">
                        <li>
                            <router-link :to="`/ShoppingCart?id=${item.prod_id}`">
                            <img :src="item.prod_pic" alt="">
                            <a href=""><span>{{ item.prod_title }}</span></a>
                            </router-link>
                        </li>
                    </ul>
                    <ul v-for="(item,index) in picture_4[index_1][3]" class="ul_1"
                        style="border: 1px solid white;display: inline-block">
                        <li>
                            <router-link :to="`/ShoppingCart?id=${item.prod_id}`">
                            <img :src="item.prod_pic" alt="">
                            <a href=""><span>{{ item.prod_title }}</span></a>
                            </router-link>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--        导航条下方块级画面展示-->
        <div style="margin-top: 20px;width: 1240px">
            <div id="div6">
                <div style="margin-right: 75px">
                    <ul v-for="(item,index) in picture_3[0]" :key="index">
                        <li>
                            <img :src="item.notableAddress">
                            <a href="">
                                {{ item.notableTitle }}
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div id="div7">
                <ul v-for="(item,index) in picture_2[0]" :key="index">
                    <li style="float: left"><img :src="item.notableAddress" alt="" style="width: 316px;height: 170px">
                    </li>
                </ul>
            </div>
        </div>


    </div>

</template>


<script>
    import {addressNotable,getAll} from "../../api/system/notable"

    export default {
        name: "Menu",
        data() {
            return {
                caiDan: false,
                index_1: 0,
                daoHangTiao: [],
                // 走马灯及下方图片
                photo: [],
                picture_1: [],
                picture_2: [],
                picture_3: [],
                // 导航条菜单图片
                photo_1: [],
                picture_4: [[], [], [], [], [], [], [], [], []],
            }
        },
        methods: {

            // 左侧导航条展示
            enter(index) {
                this.caiDan = true
            }
            ,
            leave() {
                this.caiDan = false
            }
            ,
            enter_1() {
                this.caiDan = true

            }
            ,
            leave_1() {
                this.caiDan = false
            },

            change(index) {
                this.index_1 = index
            },

            //图片地址过滤
            getAddress() {
                addressNotable().then(res => {
                    this.photo = res;
                    this.daoHangTiao.push(this.photo.filter(value => {
                        return value.notableProperty === 13
                    }))

                    this.picture_1.push(this.photo.filter(value => {
                        return value.notableProperty === 1
                    }))
                    for (let p of this.picture_1[0]) {
                        p.notableAddress = process.env.VUE_APP_BASE_API + p.notableAddress
                    }
                    this.picture_2.push(this.photo.filter(value => {
                        return value.notableProperty === 2
                    }))
                    for (let p of this.picture_2[0]) {
                        p.notableAddress = process.env.VUE_APP_BASE_API + p.notableAddress
                    }

                    this.picture_3.push(this.photo.filter(value => {
                        return value.notableProperty === 3
                    }))


                })
            },

            getAllPicture(){
                getAll().then(res =>{
                    this.photo_1 = res;
                    for (let p of this.photo_1) {
                        p.prod_pic = process.env.VUE_APP_BASE_API + p.prod_pic
                    }
                    this.picture_4[0].push(this.photo_1.filter(value => {
                            return value.n_id === 8
                        }).slice(0, 6)
                    )
                    this.picture_4[0].push(this.photo_1.filter(value => {
                            return value.n_id === 8
                        }).slice(6, 12)
                    )
                    this.picture_4[0].push(this.photo_1.filter(value => {
                            return value.n_id === 8
                        }).slice(12, 18)
                    )
                    this.picture_4[0].push(this.photo_1.filter(value => {
                            return value.n_id === 8
                        }).slice(18, 24)
                    )
                    this.picture_4[1].push(this.photo_1.filter(value => {
                            return value.n_id === 9
                        }).slice(0, 6)
                    )
                    this.picture_4[1].push(this.photo_1.filter(value => {
                            return value.n_id === 9
                        }).slice(6, 12)
                    )
                    this.picture_4[1].push(this.photo_1.filter(value => {
                            return value.n_id === 9
                        }).slice(12, 18)
                    )
                    this.picture_4[1].push(this.photo_1.filter(value => {
                            return value.n_id === 9
                        }).slice(18, 24)
                    )
                    this.picture_4[2].push(this.photo_1.filter(value => {
                            return value.n_id === 10
                        }).slice(0, 6)
                    )
                    this.picture_4[2].push(this.photo_1.filter(value => {
                            return value.n_id === 10
                        }).slice(6, 12)
                    )
                    this.picture_4[2].push(this.photo_1.filter(value => {
                            return value.n_id === 10
                        }).slice(12, 18)
                    )
                    this.picture_4[2].push(this.photo_1.filter(value => {
                            return value.n_id === 10
                        }).slice(18, 24)
                    )
                    this.picture_4[3].push(this.photo_1.filter(value => {
                            return value.n_id === 11
                        }).slice(0, 6)
                    )
                    this.picture_4[3].push(this.photo_1.filter(value => {
                            return value.n_id === 11
                        }).slice(6, 12)
                    )
                    this.picture_4[3].push(this.photo_1.filter(value => {
                            return value.n_id === 11
                        }).slice(12, 18)
                    )
                    this.picture_4[3].push(this.photo_1.filter(value => {
                            return value.n_id === 11
                        }).slice(18, 24)
                    )
                    this.picture_4[4].push(this.photo_1.filter(value => {
                            return value.n_id === 12
                        }).slice(0, 6)
                    )
                    this.picture_4[4].push(this.photo_1.filter(value => {
                            return value.n_id === 12
                        }).slice(6, 12)
                    )
                    this.picture_4[4].push(this.photo_1.filter(value => {
                            return value.n_id === 12
                        }).slice(12, 18)
                    )
                    this.picture_4[4].push(this.photo_1.filter(value => {
                            return value.n_id === 12
                        }).slice(18, 24)
                    )
                    this.picture_4[5].push(this.photo_1.filter(value => {
                            return value.n_id === 13
                        }).slice(0, 6)
                    )
                    this.picture_4[5].push(this.photo_1.filter(value => {
                            return value.n_id === 13
                        }).slice(6, 12)
                    )
                    this.picture_4[5].push(this.photo_1.filter(value => {
                            return value.n_id === 13
                        }).slice(12, 18)
                    )
                    this.picture_4[5].push(this.photo_1.filter(value => {
                            return value.n_id === 13
                        }).slice(18, 24)
                    )
                    this.picture_4[6].push(this.photo_1.filter(value => {
                            return value.n_id === 14
                        }).slice(0, 6)
                    )
                    this.picture_4[6].push(this.photo_1.filter(value => {
                            return value.n_id === 14
                        }).slice(6, 12)
                    )
                    this.picture_4[6].push(this.photo_1.filter(value => {
                            return value.n_id === 14
                        }).slice(12, 18)
                    )
                    this.picture_4[6].push(this.photo_1.filter(value => {
                            return value.n_id === 14
                        }).slice(18, 24)
                    )
                    this.picture_4[7].push(this.photo_1.filter(value => {
                            return value.n_id === 15
                        }).slice(0, 6)
                    )
                    this.picture_4[7].push(this.photo_1.filter(value => {
                            return value.n_id === 15
                        }).slice(6, 12)
                    )
                    this.picture_4[7].push(this.photo_1.filter(value => {
                            return value.n_id === 15
                        }).slice(12, 18)
                    )
                    this.picture_4[7].push(this.photo_1.filter(value => {
                            return value.n_id === 15
                        }).slice(18, 24)
                    )
                    this.picture_4[8].push(this.photo_1.filter(value => {
                            return value.n_id === 16
                        }).slice(0, 6)
                    )
                    this.picture_4[8].push(this.photo_1.filter(value => {
                            return value.n_id === 16
                        }).slice(6, 12)
                    )
                    this.picture_4[8].push(this.photo_1.filter(value => {
                            return value.n_id === 16
                        }).slice(12, 18)
                    )
                    this.picture_4[8].push(this.photo_1.filter(value => {
                            return value.n_id === 16
                        }).slice(18, 24)
                    )


                })
            }

        },
        created() {
            this.getAddress()
            this.getAllPicture()
        },

    }
</script>


<style scoped>
    /*全局a标签无下划线*/
    a {
        text-decoration: none;
    }

    /*全局li标签无圆点*/
    li {
        list-style: none;
    }

    #div1 {
        width: 1226px;
        margin: 0 auto;
    }

    #div2 {
        height: 460px;
        position: absolute;
        top: 161px;
        z-index: 999;
    }

    .ul_2 li {
        width: 200px;
    }

    #li1 a {
        display: block;
        color: #fff;
        font-size: 14px;
        line-height: 42px;
        background-color: rgba(0, 0, 0, 0)
    }

    #li1 a {
        display: block;
        color: #fff;
        font-size: 16px;
        line-height: 42px;
        margin-left: 25px;
        background-color: rgba(0, 0, 0, 0)
    }

    #li1:hover {
        background-color: #FF6700;
    }

    #div4 {
        height: 460px;
        width: 1050px;
        position: absolute;
        top: 14px;
        left: 180px;
        background: white;
        text-align: left;
    }

    #div4 ul {
        display: inline-block;
    }

    .ul_1 {
        width: 210px;
        float: left;
        opacity: 1;
    }

    .ul_1 li {
        width: 240px;
        height: 48px;
        float: left;
    }

    .ul_1 li a {
        padding-left: 10px;
        line-height: 40px;
        color: #333;
    }

    .ul_1 li a span:hover {
        color: #FF6700;
    }


    #div6 {
        float: left;
        width: 234px;
        height: 170px;
        margin-right: 14px;
        background: #5f5750;
    }

    #div6 ul {
        width: 100%;
    }

    #div6 ul li {
        float: left;
        text-align: center;
        width: 33.33%;
        font-size: 13px;
    }

    #div6 ul li a {
        display: block;
        color: #fff;
        opacity: .7;
        padding-top: 13px;
        padding-bottom: 15px;

    }

    #div6 ul li img {
        width: 24px;
        height: 24px;
        margin: 0 auto;
    }

    #div7 ul li {
        margin-right: 14px;
    }
</style>

<style>
    #div5 .el-carousel__arrow--left {
        left: 200px;
    }

    #div5 .el-carousel__arrow {
        height: 50px;
        width: 50px;
        font-size: 40px;
    }
</style>
